<script setup>

</script>

<template>
  <div style="width: 100vw;height:100vh;overflow: hidden;display: flex">
    <!--  左边的    -->
    <div style="flex: 1">
      <!-- 使用el-image指定背景图片,从百度中随便搜索了一张-->
      <el-image
          style="width: 100%;height: 100%"
          fit="cover"
          src="https://img2.baidu.com/it/u=50822098,1896803410&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
      />
      <!--  绝对布局    -->
      <div class="welcome-title">
        <!--  加大加粗  -->
        <div style="font-size: 30px;font-weight: bold">学习后台管理</div>
        <div style="margin-top: 20px">如何搭建前后端框架开发项目流程</div>
        <div style="margin-top: 20px">Work For Money</div>
      </div>

    </div>
    <!--  右边的:登入注册    -->
    <div style="width: 350px; background-color: aquamarine;z-index: 1">
      <!--  走路由跳转一个地址  -->
      <!--  <router-view/>    -->
      <!--  设置页面切换动画效果    -->
      <router-view v-slot="{ Component }">
        <transition name="el-fade-in-linear" mode="in-out">
          <!--      style淡入淡出bug直接设置style height 100%    -->
          <component :is="Component" style="height: 100%"/>
        </transition>
      </router-view>
    </div>
  </div>

</template>

<style scoped>
  .welcome-title{
    position: absolute;
    bottom: 30px;
    left: 30px;
    color: white;
    text-shadow: 0 0 10px black;
  }
</style>